import Image from 'next/image';
import {UpdateInvoice, DeleteInvoice} from '@/app/ui/invoices/buttons';
import InvoiceStatus from '@/app/ui/invoices/status';
import {formatDateToLocal, formatCurrency} from '@/app/lib/utils';
import {fetchFilteredInvoices} from '@/app/lib/data';
import getHolder10 from "@/app/lib/db_mysql";

export default async function Holders10Table() {
    const holders = await getHolder10();

    return (
        <div className="mt-6 flow-root">
            <div className="inline-block min-w-full align-middle">
                <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
                    {/*<div className="md:hidden">*/}
                    {/*    {holders?.map((holder) => (*/}
                    {/*        <div*/}
                    {/*            key={holder.id}*/}
                    {/*            className="mb-2 w-full rounded-md bg-white p-4"*/}
                    {/*        >*/}
                    {/*            <div className="flex items-center justify-between border-b pb-4">*/}
                    {/*                <div>*/}
                    {/*                    <div className="mb-2 flex items-center">*/}
                    {/*                        <Image*/}
                    {/*                            src={holder.image_url}*/}
                    {/*                            className="mr-2 rounded-full"*/}
                    {/*                            width={28}*/}
                    {/*                            height={28}*/}
                    {/*                            alt={`${holder.name}'s profile picture`}*/}
                    {/*                        />*/}
                    {/*                        <p>{holder.name}</p>*/}
                    {/*                    </div>*/}
                    {/*                    <p className="text-sm text-gray-500">{holder.email}</p>*/}
                    {/*                </div>*/}
                    {/*                <InvoiceStatus status={holder.status}/>*/}
                    {/*            </div>*/}
                    {/*            <div className="flex w-full items-center justify-between pt-4">*/}
                    {/*                <div>*/}
                    {/*                    <p className="text-xl font-medium">*/}
                    {/*                        {formatCurrency(holder.amount)}*/}
                    {/*                    </p>*/}
                    {/*                    <p>{formatDateToLocal(holder.date)}</p>*/}
                    {/*                </div>*/}
                    {/*                <div className="flex justify-end gap-2">*/}
                    {/*                    <UpdateInvoice id={holder.id}/>*/}
                    {/*                    <DeleteInvoice id={holder.id}/>*/}
                    {/*                </div>*/}
                    {/*            </div>*/}
                    {/*        </div>*/}
                    {/*    ))}*/}
                    {/*</div>*/}
                    <table className="hidden min-w-full text-gray-900 md:table">
                        <thead className="rounded-lg text-left text-sm font-normal">
                        <tr>
                            <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
                                stock_code
                            </th>
                            <th scope="col" className="px-3 py-5 font-medium">
                                stock_name
                            </th>
                            <th scope="col" className="px-3 py-5 font-medium">
                                holder_name
                            </th>
                            <th scope="col" className="px-3 py-5 font-medium">
                                hold_num
                            </th>
                            <th scope="col" className="px-3 py-5 font-medium">
                                hold_num_ratio
                            </th>
                            {/*<th scope="col" className="relative py-3 pl-6 pr-3">*/}
                            {/*    <span className="sr-only">Edit</span>*/}
                            {/*</th>*/}
                        </tr>
                        </thead>
                        <tbody className="bg-white">
                        {holders?.map((holder) => (
                            <tr
                                key={holder.id}
                                className="w-full border-b py-3 text-sm last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg"
                            >
                                <td className="whitespace-nowrap py-3 pl-6 pr-3">
                                    <div className="flex items-center gap-3">
                                        <p>{holder.stock_code}</p>
                                    </div>
                                </td>
                                <td className="whitespace-nowrap px-3 py-3"
                                    style={{
                                        color: (holder.hold_num != null && holder.hold_num.gt(1000)) ? 'magenta' : 'darkgreen'
                                    }}>

                                    {holder.stock_name}
                                </td>
                                <td className="whitespace-nowrap px-3 py-3">
                                    {holder.holder_name}
                                </td>
                                <td className="whitespace-nowrap px-3 py-3">
                                    <div>{holder.hold_num != null ? holder.hold_num.toString() : 0}</div>
                                </td>
                                <td className="whitespace-nowrap px-3 py-3">
                                    <div>{holder.hold_num_ratio != null ? holder.hold_num_ratio.toString() : 0}</div>
                                </td>

                                <td className="whitespace-nowrap py-3 pl-6 pr-3">
                                    <div className="flex justify-end gap-3">
                                        <UpdateInvoice id={holder.id.toString()}/>
                                        <DeleteInvoice id={holder.id.toString()}/>
                                    </div>
                                </td>
                            </tr>
                        ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    );
}
